// 主题色
// 头部
$headerBackground: #367be4;
$headerTitleFsize: 20px;
$headerTextFsize: 16px;
$headerIconFsize: 18px;
$headerTextColor: #ffffff;
// 侧边栏
$sideBarBackground: #f5f5f5;
$sideBarFsize: 14px;
$sideBarTextColor: #303133;
// 内容
$mainBackground: #f2f3f5;




// 盒子
$boxBgColor:#fff; // 盒子背景色
$boxBorderColor: #ddd; // 盒子线条色

// 标题文案
$titleTextColor: #409eff; // 标题文字颜色
$titleFsize: 26px; // 标题字号

// 提示文案
$tipsTextColor: #409eff; // 提示文字颜色
$tipsFsize: 13px; // 提示字号

// 按钮
$btnBorderColor: #409eff; // 按钮线条颜色
$btnTextColor: #fff; // 按钮文字颜色
$btnBgColor: #409eff; // 按钮文背景颜色
$btnFsize: 14px; // 按钮字号

// 弹性布局 垂直居中。两端对齐
@mixin flex_sc() {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 弹性布局 垂直居中。间距对等
@mixin flex_sac() {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

// 弹性布局 垂直向上。两端对齐
@mixin flex_ss() {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

// 弹性布局 垂直向上。两端向上对齐
@mixin flex_sfs() {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

// 弹性布局 垂直居中。两端向上对齐
@mixin flex_sfc() {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

// 弹性布局 垂直水平居中
@mixin flex_cc() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 隐藏滚动条
@mixin hideScrollLine() {
  &::-webkit-scrollbar {
      display: none;
  }
}

// 颜色、字号、行高
@mixin font($color, $fontSise, $lineHeight) {
  color: $color;
  font-size: $fontSise + px;
  line-height: $lineHeight + px;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
      "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei",
      sans-serif;
  font-weight: normal;
}

// 颜色、字号、行高 rubik字体（多用于数字，这里没有引入字体包，其实是没有效果的）
@mixin rubik_font($color, $fontSise, $lineHeight) {
  color: $color;
  font-size: $fontSise + px;
  line-height: $lineHeight + px;
  font-family: Rubik-Regular, Rubik;
  font-weight: normal;
}

//省略一行
@mixin text_1() {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  word-break: break-all;
}

//省略二行
@mixin text_2() {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}

//省略三行
@mixin text_3() {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
}

//省略四行
@mixin text_4() {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  word-break: break-all;
}

//省略四行
@mixin text_5() {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  word-break: break-all;
}




